<template>
    <div class="minW1060-auto bg-fff mt10">
        <div class="pad20 ml10">

            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/station' }">站点管理</el-breadcrumb-item>
                <el-breadcrumb-item
                        :to="{ path: '/station/edit',query:{standList:this.standList,station:this.station,from:'location'}}">
                    站点编辑
                </el-breadcrumb-item>
                <el-breadcrumb-item>绘制站台</el-breadcrumb-item>
            </el-breadcrumb>

            <el-row class="mt20">
                <el-col :span="12">
                    <el-input placeholder="请输入内容" v-model="mapLocation.address" style="width: 40%">
                        <el-button slot="append" icon="el-icon-search"
                                   @click="querySearch(mapLocation.address),dialogDeviceVisible = true"></el-button>
                    </el-input>
                </el-col>
                <el-col align="right" style="height: 36px" :span="12">

                    <div class="dlblock-mb20 pr10 ml20">
                        <el-button type="primary" @click="saveLocation">保存</el-button>
                    </div>
                </el-col>
            </el-row>

            <!--弹出的设备对话框-->
            <el-dialog :visible.sync="dialogDeviceVisible" width="50%">

                <el-row>
                    <h1>搜索结果</h1>
                </el-row>

                <el-row class="mt10">
                    <el-table
                            class="my-table"
                            :data="locationInfo"
                            height="350"
                            v-loading="loading"
                            :header-row-class-name="'my-table-header'"
                            ref="myTable"
                            border>
                        <el-table-column align="center" prop="title" label="标题"></el-table-column>
                        <el-table-column align="center" prop="address" label="地址"></el-table-column>
                        <el-table-column align="center" prop="tel" label="电话"></el-table-column>
                        <el-table-column align="center" prop="point" label="经纬度">
                            <template slot-scope="{row}">
                                <p>经度:{{row.point.lng}}</p>
                                <p>纬度:{{row.point.lat}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="操作">
                            <template slot-scope="{row}">
                                <el-button type="text" @click="handleSelect(row)">选择</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
            </el-dialog>

            <el-row :gutter="30" class="mt5">
                <div class="baidu-map">
                    <div id="map" class="text-center">
                        <div style="margin: 5px">
                            <baidu-map class="bm-view" :center="mapCenter" :zoom="mapZoom" :scroll-wheel-zoom="true"
                                       ak="0MA953dkYQM4fQriWe6NaII8QpjeCCZh"
                                       @click="getClickInfo"
                                       @ready="handlerBMap"/>
                        </div>
                    </div>
                </div>
            </el-row>
        </div>
    </div>
</template>

<script>

    import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

    export default {
        name: "index",
        components: {
            BaiduMap,
        },
        data() {
            return {

                loading: false,

                //地图变量
                mapLocation: {
                    address: undefined,
                    coordinate: undefined
                },
                mapZoom: 15,
                mapCenter: {lng: 0, lat: 0},
                locationCity: '合肥市',

                //站点信息变量
                standList: [],
                standIndex: '',
                locationInfo: [],
                station: {},

                //临时存放点位
                temp: {
                    lng: '',
                    lat: ''
                },

                //dialogDeviceVisible
                dialogDeviceVisible: false,
            }
        },
        mounted() {
            this.standList = this.$route.query.standList
            this.standIndex = this.$route.query.index
            this.station = this.$route.query.station
        },
        methods: {

            //地图加载事件
            handlerBMap({BMap, map}) {
                this.BMap = BMap
                this.map = map
                if (this.mapLocation.coordinate && this.mapLocation.coordinate.lng) {
                    this.mapCenter.lng = this.mapLocation.coordinate.lng
                    this.mapCenter.lat = this.mapLocation.coordinate.lat
                    map.addOverlay(new this.BMap.Marker(this.mapLocation.coordinate))
                } else {
                    //回显
                    if (this.standList[this.standIndex].lng != '' && this.standList[this.standIndex].lat != '') {
                        this.mapCenter.lng = this.standList[this.standIndex].lng
                        this.mapCenter.lat = this.standList[this.standIndex].lat
                        this.mapZoom = 16
                        map.addOverlay(new this.BMap.Marker(this.mapCenter))
                    } else {
                        this.mapCenter.lng = 117.350768
                        this.mapCenter.lat = 31.780393
                        this.mapZoom = 10
                    }
                }
            },

            //地图点击事件
            getClickInfo(e) {
                if (this.map) {
                    this.map.clearOverlays()
                    this.map.addOverlay(new this.BMap.Marker(e.point))
                    this.temp.lng = e.point.lng
                    this.temp.lat = e.point.lat
                }
            },

            //搜索按钮
            querySearch(queryString) {
                var that = this
                var myGeo = new this.BMap.Geocoder()
                myGeo.getPoint(queryString, function (point) {
                    // console.log("point")
                    // console.log(point);
                    if (point) {
                        that.mapLocation.coordinate = point
                        // that.makerCenter(point)
                    } else {
                        that.mapLocation.coordinate = null
                    }
                }, this.locationCity)
                var s = [];
                var options = {
                    onSearchComplete: function (results) {
                        if (local.getStatus() === 0) {
                            // 判断状态是否正确
                            for (var i = 0; i < results.getCurrentNumPois(); i++) {
                                var x = results.getPoi(i)
                                // console.log("x")
                                // console.log(x);
                                var item = {
                                    title: x.title,
                                    address: x.address,
                                    tel: x.phoneNumber != undefined ? x.phoneNumber : '未收录',
                                    point: x.point,
                                }
                                s.push(item)
                            }
                        }
                    }
                }
                this.locationInfo = s
                var local = new this.BMap.LocalSearch(this.map, options)
                local.search(queryString)
            },

            //选择
            handleSelect(item) {
                var {point} = item
                this.mapLocation.coordinate = point
                this.temp.lng = point.lng
                this.temp.lat = point.lat
                this.makerCenter(point)
                this.dialogDeviceVisible = false
            },

            //标记点
            makerCenter(point) {
                if (this.map) {
                    this.map.clearOverlays()
                    this.map.addOverlay(new this.BMap.Marker(point))
                    this.mapCenter.lng = point.lng
                    this.mapCenter.lat = point.lat
                    this.mapZoom = 16
                }
            },

            //保存标记点
            saveLocation() {
                if (this.temp.lat != '' && this.temp.lng != '') {
                    this.standList[this.standIndex].lng = this.temp.lng
                    this.standList[this.standIndex].lat = this.temp.lat
                }
                this.$router.push({
                    path: '/station/edit',
                    query: {standList: this.standList, station: this.station, from: 'location'}
                })
                this.$store.dispatch('tagsView/delView', {path: '/station/location'})
            }
        }

    }
</script>

<style>

    .bm-view {
        height: 710px;
        width: 100%;
    }

    .map {
        border-radius: 25px;
    }

    .BMap_cpyCtrl {
        display: none;
    }

    /*.anchorBL {*/
    /*    display: none;*/
    /*}*/
</style>
